﻿@page "/utilities/justify-content"

<DocsPage>
    <DocsPageHeader Title="Justify Content" SubTitle="Controlling how flex and grid items are positioned along a container's main axis." />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="Class Reference" HideTitle="true" />
            <DocsAutoGen_Flexbox_JustifyContent/>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Basic Usage" />
            <SectionSubGroups>
                        
                <DocsPageSection>
                    <SectionHeader Title="Start">
                        <Description></Description>
                    </SectionHeader>
                    <SectionContent DarkenBackground="true" Code="@nameof(JustifyContentStartExample)" HighLight="justify-start">
                        <JustifyContentStartExample/>
                    </SectionContent>
                </DocsPageSection>
                
                <DocsPageSection>
                    <SectionHeader Title="Center">
                        <Description></Description>
                    </SectionHeader>
                    <SectionContent DarkenBackground="true" Code="@nameof(JustifyContentCenterExample)" HighLight="justify-center">
                        <JustifyContentCenterExample/>
                    </SectionContent>
                </DocsPageSection>
                
                <DocsPageSection>
                    <SectionHeader Title="End">
                        <Description></Description>
                    </SectionHeader>
                    <SectionContent DarkenBackground="true" Code="@nameof(JustifyContentEndExample)" HighLight="justify-end">
                        <JustifyContentEndExample/>
                    </SectionContent>
                </DocsPageSection>
                
                <DocsPageSection>
                    <SectionHeader Title="Space between">
                        <Description></Description>
                    </SectionHeader>
                    <SectionContent DarkenBackground="true" Code="@nameof(JustifyContentSpaceBetweenExample)" HighLight="justify-space-between">
                        <JustifyContentSpaceBetweenExample/>
                    </SectionContent>
                </DocsPageSection>
                
                <DocsPageSection>
                    <SectionHeader Title="Space around">
                        <Description></Description>
                    </SectionHeader>
                    <SectionContent DarkenBackground="true" Code="@nameof(JustifyContentSpaceAroundExample)" HighLight="justify-space-around">
                        <JustifyContentSpaceAroundExample/>
                    </SectionContent>
                </DocsPageSection>

            </SectionSubGroups>
        </DocsPageSection>
        
        <DocsPageSection>
            <SectionHeader Title="Applying conditionally"/>
            <SectionSubGroups>
                <DynamicBreakpointSectionContent Utility="justify-md-center"/>
            </SectionSubGroups>
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>

